<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线预约</title>
    <!-- 引入Vue 2 -->
    <script src="./vue/vue.js"></script>
    <!-- 引入Element UI -->
    <link rel="stylesheet" href="./element-ui/index.css">
    <script src="./element-ui/index.js"></script>
    <!-- 引入Axios -->
    <script src="./axios/axios.min.js"></script>
    <style>
        .online-appointment {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .title-card {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            text-align: center;
        }
        .title-card h1 {
            font-size: 24px;
            margin: 0;
        }
        .form-card {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
<div id="app">
    <appointment-on-line></appointment-on-line>
</div>

<script>
    // 定义组件
    Vue.component('appointment-on-line', {
        template: `
                <div class="online-appointment">
                    <el-card class="title-card">
                        <h1>在线预约</h1>
                    </el-card>
                    <el-card class="form-card">
                        <el-form :model="form" label-width="120px">
                            <el-form-item label="请求人ID">
                                <el-select v-model="form.inhabitantId" placeholder="请选择请求人ID" @change="getInhabitantGender">
                                    <el-option v-for="option in inhabitantOptions" :key="option.id" :label="option.name" :value="option.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select v-model="form.gender" placeholder="请选择性别" disabled>
                                    <el-option label="男" value="0" />
                                    <el-option label="女" value="1" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="预约类型">
                                <el-select v-model="form.item" placeholder="请选择预约类型" @change="fetchDoctorsByProject">
                                    <el-option v-for="item in projectOptions" :key="item.id" :label="item.typeName" :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="医生ID">
                                <el-select v-model="form.doctorId" placeholder="请选择医生ID">
                                    <el-option v-for="doctor in doctorOptions" :key="doctor.staffId" :label="doctor.realName" :value="doctor.staffId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="预约时间">
                                <el-date-picker v-model="form.subTime" type="datetime" placeholder="选择日期时间" :picker-options="pickerOptions" />
                            </el-form-item>
                            <el-form-item label="联系邮箱">
                                <el-input v-model="form.email" placeholder="请输入用于联系的邮箱" />
                            </el-form-item>
                            <el-form-item label="问题描述">
                                <el-input v-model="form.subscribe" placeholder="请简述您的问题" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            `,
        data() {
            return {
                form: {
                    inhabitantId: '',
                    gender: '',
                    doctorId: null,
                    item: '',
                    subTime: '',
                    email: '',
                    subscribe: ''
                },
                projectOptions: [], // 项目下拉框数据（无）
                inhabitantOptions: [], // 居民下拉框数据
                doctorOptions: [], // 医生下拉框数据
                // 限制日期选择范围
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() || time.getTime() > Date.now() + 15 * 24 * 60 * 60 * 1000;
                    }
                }
            };
        },
        methods: {
            // 获取Cookie中的token
            getCookie(name) {
                const value = `; ${document.cookie}`;
                const parts = value.split(`; ${name}=`);
                if (parts.length === 2) return parts.pop().split(';').shift();
            },
            // 获取居民下拉框数据
            fetchProjectOptions() {
                const token = this.getCookie('token');
                axios.get('http://localhost:8000/user/inhabitant/get', {
                    headers: {
                        'Authorization': `${token}`
                    }
                })
                    .then((res) => {
                        if (res.data.code === 200) {
                            this.inhabitantOptions = res.data.data;
                        } else if (res.data.code === 996) {
                            this.$message.error(res.data.message);
                        } else {
                            this.$message.error('获取项目列表失败');
                        }
                    })
                    .catch((err) => {
                        document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                        window.location.href = 'http://localhost:5173';
                        this.$message.error('获取项目列表失败');
                    });
            },
            // 获取项目数据
            fetchProject() {
                const token = this.getCookie('token');
                axios.get('http://localhost:8000/user/appointment/getDepartmentWithDoctor', {
                    headers: {
                        'Authorization': `${token}`
                    }
                })
                    .then((res) => {
                        if (res.data.code === 200) {
                            this.projectOptions = res.data.data;
                        } else {
                            this.$message.error('获取项目列表失败');
                        }
                    })
                    .catch((err) => {
                        document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                        window.location.href = 'http://localhost:5173';
                        this.$message.error('获取项目列表失败');
                    });
            },
            // 根据项目获取医生
            fetchDoctorsByProject(id) {
                const selectedProject = this.projectOptions.find((project) => project.id === id);
                if (selectedProject) {
                    this.doctorOptions = selectedProject.doctors;
                } else {
                    this.doctorOptions = [];
                    this.$message.error('未找到对应的医生信息');
                }
            },
            // 根据请求人ID获取性别
            getInhabitantGender(id) {
                const selectOption = this.inhabitantOptions.find((item) => item.id === id);
                if (selectOption) {
                    this.form.gender = selectOption.gender;
                }
            },
            // 提交表单
            submitForm() {
                // 表单验证逻辑
                if (
                    this.form.inhabitantId === '' ||
                    this.form.gender === '' ||
                    this.form.doctorId === null ||
                    this.form.item === '' ||
                    this.form.subTime === '' ||
                    this.form.email === '' ||
                    this.form.subscribe === ''
                ) {
                    this.$message.error('请填写所有字段');
                    return;
                }

                // 提交表单到后端
                const token = this.getCookie('token');
                axios.post('http://localhost:8000/user/appointment/save', this.form, {
                    headers: {
                        'Authorization': `${token}`
                    }
                })
                    .then((response) => {
                        this.$message.success('预约成功');
                        // 使用 ElMessageBox 显示成功信息弹窗
                        this.$alert(response.data != '' ? response.data : '数据正常', '提示', {
                            confirmButtonText: '确定',
                            type: 'success'
                        });
                        window.location.href = 'http://localhost:8000/static/home.html'; // 假设这是跳转的路径
                    })
                    .catch((error) => {
                        document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                        window.location.href = 'http://localhost:5173';
                        this.$message.error('预约失败');
                        console.error(error);
                    });
            }
        },
        mounted() {
            this.fetchProjectOptions();
            this.fetchProject();
        }
    });

    // 创建Vue应用实例
    new Vue({
        el: '#app'
    });
</script>
</body>

</html>
